<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    placeholder="test placeholder"
    :height="200"
    @change="change"
  />
</template>

<script lang="ts" setup>
import Codemirror from 'codemirror-editor-vue3'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/display/placeholder.js'
import 'codemirror/theme/dracula.css'

import { ref } from 'vue'

const code = ref(`
  var i = 0;
  for (; i < 9; i++) {
    console.log(i);
    // more statements
  }`)

const cmOptions = ref({
  mode: 'text/javascript',
  theme: 'dracula',
})

const change = (newValue) => {
  console.log(newValue)
  code.value = newValue
}
</script>
